<template>
  <div v-drag>
    <div class="mask" @click="closeTip(false)"></div>
    <div class="edit_box" v-loading="dataLoad">
      <div class="box_head">
        <p>绑定{{type===0?'管理员':'楼宇'}}</p>
        <i @click="closeTip(false)"></i>
      </div>
      <div class="box_body bind_box" v-if="type===1">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkList" @change="handleCheckItemChange">
          <el-checkbox v-for="(item,index) in tableInfo" :key="index" :label="item.recordcode">{{item.buildingname}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="box_body bind_box" v-else>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkList" @change="handleCheckItemChange">
          <el-checkbox v-for="(item,index) in tableInfo" :key="index" :label="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="box_foot">
        <span @click="closeTip(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import {fireBuildingBindManager, getAllFireBuilding} from "../../../api/building";
import {fireManagerBindBuilding, getAllFireBuildingManager} from "../../../api/manager";

  export default {
    props:['eid','type','ids'],
    data() {
      return {
        dataLoad: false,
        tableInfo:[],
        list:[],
        checkList:[],
        checkAll: false,
        isIndeterminate: true
      }
    },
    mounted() {
      this.checkList = JSON.parse('['+this.ids+']');
      if (this.type===1){
        let arr = [];
        this.checkList.forEach((item,index)=>{
          arr.push(item+'');
        })
        this.checkList = arr;
      }
      this.getEvents();
    },
    methods: {
      getEvents(){
        let that = this;
        that.dataLoad = true;
        // 0获取管理员，1获取楼宇
        if (type===0){
          getAllFireBuildingManager().then(res => {
            if (res.success){
              that.setData(res.data);
            }
            that.dataLoad = false;
          })
        }else{
          getAllFireBuilding().then(res => {
            if (res.success){
              that.setData(res.data);
            }
            that.dataLoad = false;
          })
        }
      },

      setData(table){
        let that = this;
        let arr = [];
        that.tableInfo = table;
        that.tableInfo.forEach((item,index)=>{
          that.type===1?arr.push(item.recordcode):arr.push(item.id);
        })
        that.list = arr;
        if(that.checkList.length === that.tableInfo.length){
          that.isIndeterminate =false;
          that.checkAll =true;
        }
      },

      // 全选
      handleCheckAllChange(val) {
        this.checkList = val ? this.list : [];
        this.isIndeterminate = false;
      },

      // 单选
      handleCheckItemChange(val){
        this.isIndeterminate = this.checkList.length!==this.list.length&&this.checkList.length!==0;
        this.checkAll = this.checkList.length===this.list.length;
      },

      confirmEdit() {
        let data = '';
        this.checkList.forEach((item, i) => {
          data = data + (i > 0 ? ',' : '') + item;
        });
        this.bindEvents(data)
      },

      bindEvents(data){
        let that = this;
        that.dataLoad = true;
        if (this.type===0) {
          fireBuildingBindManager({recordcode:that.eid ,managerIds:data}).then(res => {
            that.setResult(res.success);
          }, (err) => {
            that.dataLoad = false;
          });
        }else {
          fireManagerBindBuilding({managerId:that.eid,buildingIds:data}).then(res => {
            that.setResult(res.success);
          }, (err) => {
            that.dataLoad = false;
          });
        }
      },

      setResult(finish){
        if (finish){
          this.closeTip(true);
          this.$message.success('操作成功！');
        }
        this.dataLoad = false;
      },

      closeTip(refresh) {
        this.$emit('listenToEvent', {show:false,refresh:refresh})
      }
    }
  }
</script>

<style>
  .bind_box {
    min-height: 300px;
  }
.bind_box label {
  width: calc(50% - 15px);
  margin-bottom: 15px;
}
.bind_box label:nth-child(2n) {
  margin-right: 0;
}
</style>
